<template>
  <div>App</div>
  <p>count:{{ count }}</p>
  <button @click="count++">修改count</button>
  <p>count:{{ person }}</p>
  <button @click="changePerson">修改person</button>
</template>

<script lang="ts">
 import { defineComponent } from 'vue'
  export default  defineComponent({
    name:'App',
  })
</script>
<script setup lang="ts">
import {ref, watch} from "vue"
   const count = ref(0);
   //对于ref保存的是一个基本类型值的话，我们直接监听当前ref对象即可得到值的变化
   watch(count,(newVal,oldVal)=>{
    console.log(newVal,oldVal)
   })

  // 对于ref保存的是一个对象类型
  const person = ref({
    name:"xiaowang",
    age:18,
    score:{
      ch:100,
      math:90
    }
  })

  const changePerson = ()=>{
    
    /*     person.value = {
          name:"xiaohuang",
          age:20
        }
    */

    // person.value.name = "xiaohuang";
    // person.value.age = 30;
    person.value.score.ch = 120;
    //person.value.score = {ch:120,math:80}


  }
  //  如果ref对象保存的是一个对象类型，我们监听ref对象，可以监听到对象的替换(可以监听到ref对象的value的替换)
  //  总结： 如果监听ref对象，则只能监听ref对象的value属性的替换，如果想要深层次的监听请使用deep深度监听
  //  watch(
  //   person,
  //   (newVal,oldVal)=>{
  //     console.log(newVal,oldVal)
  //   },
  //   {
  //     deep:true
  //   }
  //  )

  //总结：watch监听ref对象的value属性(值是代理对象)，只能监听value属性内部的修改(默认深度监听)，无法监听value属性的值被替换
  /* 
    watch(person.value,(newVal,oldVal)=>{
      console.log(newVal,oldVal,"person.value")
    })
  */


 //如果深层次的监听一个对象内部的属性(是对象类型)，监听的是这个对象内部被修改(默认深度监听)，不能监听当前的属性值被替换
 /* 
    watch(person.value.score,(newVal,oldVal)=>{
      console.log(newVal,oldVal,"person.value.score");
    })
 */
//总结：监听一个属性值被替换，watch的第一个参数可以使用函数的方式
/* 
    watch(()=>person.value.age,(newVal,oldVal)=>{console.log(newVal,oldVal)})
*/

watch(
  ()=>person.value.score,
  (newVal,oldVal)=>{
    console.log(newVal,oldVal);
  },
  {
    deep:true
  }
)

//watch监听多个
/* 
  watch([()=>person.value.age,()=>person.value.name],(newVal,oldVal)=>{
    console.log(newVal,oldVal)
  })
*/
</script>
<style lang="less" scoped>
  
</style>